/**
* 响应断言
*/ 
<template>
    <div>
        <el-table :data="assertion"  size="small">
            <el-table-column label="取值来源" prop="from" width="130px">
                <template slot-scope="scope">
                    <el-select size="small" style="width: 95%" placeholder="取值来源" v-model="assertion[scope.$index].from">
                        <el-option v-for="item in fromList" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="取值函数" prop="expression" min-width="360px">
                <template slot-scope="scope">
                    <el-select size="small" style="width: 35%" placeholder="取值方式" v-model="assertion[scope.$index].method">
                        <el-option v-for="item in methodList" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                    <el-input size="small" style="width: 60%" placeholder="请输入表达式" v-model="assertion[scope.$index].expression"/>
                </template>
            </el-table-column>
            <el-table-column label="断言方法" prop="assertion" width="150px">
                <template slot-scope="scope">
                    <el-select size="small" style="width: 90%" placeholder="断言方法" filterable v-model="assertion[scope.$index].assertion">
                        <el-option v-for="item in functionList" :key="item.id" :label="item.name" :value="item.id"/>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="预期值" prop="expect" min-width="160px">
                <template slot-scope="scope">
                    <el-input size="small" style="width: 90%" placeholder="请输入预期值" v-model="assertion[scope.$index].expect"/>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="60px">
            <template slot-scope="scope">
                <el-button size="mini" type="text" @click="remove(scope.$index)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-button size="small" icon="el-icon-plus" type="text" @click="add">新增</el-button>
        <el-button size="small" type="text" @click="deleteAll">删除全部</el-button>
        <el-button size="small" type="text" @click="showJsonpath=true">Jsonpath辅助</el-button>

        <div v-if="showJsonpath" style="margin: 20px 0px">
            <el-row>
                <el-col :span="22">
                    <p class="tip">
                        <span>断言辅助</span>
                    </p>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" type="primary" @click="showJsonpath=false">关闭</el-button>
                </el-col>
            </el-row>
            <json-path :apiId="apiId" @addContent="addContent($event)"/>
        </div>
    </div>
</template>
<script>
import JsonPath from './jsonPath'
export default {
    name: 'Assertion',
    props:{
        assertion: Array,
        apiId: String
    },
    components: { JsonPath },
    data() {
        return{
            fromList:[
                {label: "响应码", value: "resCode"},
                {label: "响应头", value: "resHeader"},
                {label: "响应体", value: "resBody"},
            ],
            methodList:[
                {label: "jsonpath", value: "jsonpath"},
                {label: "正则表达式", value: "regular"},
            ],
            functionList: [],
            showJsonpath: false
        }
    },
    created() {
        this.getAssertion();
    },
    methods: {
        getAssertion(){
            let url = '/autotest/system/assertion/list';
            this.$get(url, response =>{
                this.functionList = response.data;
            });
        },
        add(){
            this.assertion.push({from:"", method:"", expression:"", assertion:"", expect:""});
        },
        remove(index){
            this.assertion.splice(index, 1);
        },
        deleteAll(){
            this.assertion.splice(0, this.assertion.length);
        },
        addContent(item){
            const type = item.type;
            let assertion = {
                from: "resBody", 
                method: "jsonpath", 
                expression: item.path, 
                assertion: "", 
                expect: item.childValue
            }
            switch(type) {
                case 'object':
                    assertion.assertion = "equalsDict";
                    assertion.expect = JSON.stringify(item.childValue);
                    break;
                case 'array':
                    assertion.assertion = "equalsList";
                    assertion.expect = JSON.stringify(item.childValue);
                    break;
                case 'null':
                    assertion.assertion = "isNone";
                    assertion.expect = "";
                    break;
                case 'Boolean':
                    if(item.childValue === true){
                        assertion.assertion = "isTrue";
                        assertion.expect = "";
                    }else{
                        assertion.assertion = "isFalse";
                        assertion.expect = "";
                    }
                    break;
                case 'String':
                    assertion.assertion = "equals";
                    break;
                case 'Int':
                    assertion.assertion = "equalsNumber";
                    break;
                case 'Float':
                    assertion.assertion = "equalsNumber";
                    break;
                default:
                    assertion.assertion = "contains";
            }
            this.assertion.push(assertion);
        }
    }
}
</script>
<style scoped>

</style>